<template>
  <div class="bottom-box">
    <div class="box left-box">
      <span class="title">{{ introduction }}</span>
      <el-table :data="tableData"
        style="flex:1;width: 100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :row-class-name="getClassName" :header-cell-style="customHeaderCell" :cell-style="customCell">
        <el-table-column prop="breakerid" label="编号" width="180" />
        <el-table-column prop="reason" label="原因" />
        <el-table-column prop="caozuo" label="操作" />
      </el-table>
    </div>
    <div :style="{ width: $computeVw(20) }"></div>
    <div class="box right-box">
      <span class="title">文件列表</span>
      <div class="list-box">
        <li v-for="(photo, index) in photos" :key="index" class="flex-between">
          <!-- <el-image :src="photo.url" fit="cover" class="photo" @click="getImgDetail(photo)"></el-image> -->
          <div class="flex-between list-left" style="flex:6">
            <el-icon color="#42FFE7" :size="25">
              <Document />
            </el-icon>
            <el-tooltip :content="photo.fileName" placement="top" effect="light">
              <span class="name-ellipsis">{{ photo.fileName }}</span>
            </el-tooltip>
          </div>

          <div class="flex-between list-right" style="flex:4">
            <el-button text class="action-button" @click="getImgDetail(photo)">预览</el-button>
            <el-button text class="action-button" @click="downloadDoc(photo)">下载</el-button>
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { ElImage } from 'element-plus';
import wordImg from '@/assets/wordImg.png';
import axios from "axios";
import { BASE_URL } from '@/utils/common.js'
import { Document } from '@element-plus/icons-vue'
import elTableMixin from '@/utils/elTableMixin.js'
const { customHeaderCell, customCell, getClassName } = elTableMixin();

const introduction = ref('简介')

const photo = ref({})
// 假设你的图片位于 src/assets/ 目录下  
const photos = ref([
  //   { url: wordImg,fileName:'文件名1' }, // 使用 require 引入图片资源  
  //   { url: wordImg,fileName:'文件名2' },  
  // ... 更多图片数据  
]);

const tableData = ref([])

const downloadDoc = async (photo) => {
  const docUrl = BASE_URL + '/downloadDoc?fileName=' + photo.fileName

  try {
    const response = await axios({
      method: 'get',
      url: docUrl, // 你的后端下载接口  
      responseType: 'blob', // 表明服务器返回的数据类型  
    });

    // 创建一个 blob 对象  
    const url = window.URL.createObjectURL(new Blob([response.data]));
    console.log(url)
    // 创建一个a标签用于下载  
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', photo.fileName + '.docx'); // 设置下载文件名  
    document.body.appendChild(link);
    link.click(); // 模拟点击  
    // 然后移除这个元素  
    document.body.removeChild(link);
  } catch (error) {
    console.error('下载文件失败:', error);
  }
}

const getImgDetail = async (photo) => {
  try {
    const response = await axios({
      method: 'get',
      url: BASE_URL + '/getDetailByFileName?fileName=' + photo.fileName
    })

    tableData.value = response.data;
  } catch (error) {
    console.error('获得文件名失败:', error);
  }
}

onMounted(
  async () => {
    try {
      const response = await axios({
        method: 'get',
        url: BASE_URL + '/getFaultFileNames', // 你的后端下载接口   
      });
      for (let i = 0; i < response.data.length; i++) {
        let item = response.data[i]
        photos.value.push({ url: wordImg, fileName: item })
      }
    } catch (error) {
      console.error('获得文件名失败:', error);
    }

  }
)

</script>

<style scoped lang="scss">
.title {
  display: block;
  padding: 17px 30px;
  font-weight: bold;
  font-size: 16px;
  color: #42FFE7;
}

.bottom-box {
  flex: 1;
  display: flex;
  margin-top: 20px;
  overflow: hidden;

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #192E37;
    border: 1px solid #2f606b;
  }

  .right-box {
    .list-box {
      flex: 1;
      overflow-y: auto;

      li {
        list-style-type: none;
        padding: 10px 30px;
        color: #feffff;
        background-color: rgba(35, 68, 88, 0.5);
        border-top: 1px solid #3F8893;

        .list-left {
          justify-content: start;

          .name-ellipsis {
            width: 450px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 18px;
          }
        }

        .list-right {
          justify-content: end;

          .action-button {
            color: #42FFE7;
          }

          .action-button:hover {
            background-color: #07d5c0;
            color: #fff
          }
        }
      }

      li:nth-child(even) {
        background-color: #19252f;
      }
    }

  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-table__empty-block {
  width: 100% !important;
  height: computeVh(600) !important;
  font-size: computeVw(14);
  color: #FFFFFF !important;
}
</style>